<template>
  <Layout>
    <Header title = '忘记密码'>
      <Icon name = 'arrow-left' slot = 'left' @click="handleBack" />
    </Header>
    <Content>
      <form class="form" @submit="handleSubmit">
        <div class="form-group">
          <div class="form-control-wrap">
            <input type="text" class="form-control" placeholder="请输入手机号码/邮箱" v-model="account">
          </div>
        </div>
        <div class="form-group">
          <Row :gutter = "12">
            <Col :span = "16">
              <div class="form-control-wrap">
                <input type="text" class="form-control" placeholder="请输入验证码" v-model="valid">
              </div>
            </Col>
            <Col :span = "8">
              <Button :loading="getValidLoading" :disabled="getValidIndex > 0" @click="getValid" native-type = 'button' class="valid-btn" type = 'primary'>
                {{ getValidIndex <= 0 ? '获取验证码' : getValidIndex }}
              </Button>
            </Col>
          </Row>
        </div>
        <div class="form-group">
          <div class="form-control-wrap">
            <input type="text" class="form-control" placeholder="请设置新密码" v-model="password">
          </div>
        </div>
        <Button :loading="loading" :disabled="loading" class="submit" native-type = 'submit' type = 'primary'>确认重置</Button>
      </form>
    </Content>
  </Layout>
</template>

<script>

import Layout from '@/component/layout/index.js'
import { Icon, Row, Col, Button, Toast } from 'vant'

const {
  Header,
  Content
} = Layout

// 获取验证码的间隔秒数
const getValidLimit = 60

export default {

  name: 'index',

  data () {
    return {
      account: '',
      valid: '',
      password: '',

      // 是否正在获取验证码，避免重复请求
      getValidLoading: false,
      // 是否点了获取验证码按钮，只有点了获取验证码才能提交表单
      isGetValid: false,
      getValidIndex: 0,

      // 提交表单的loading
      loading: false
    }
  },

  created: function () {
    this.getValidTimer = null
  },

  beforeDestroy: function () {
    clearInterval(this.getValidTimer)
    this.getValidTimer = null
  },

  methods: {
    handleBack: function (e) {
      this.$router.go(-1)
    },
    // 获取验证码
    getValid: function (e) {
      if (
        this.getValidLoading ||
        this.getValidIndex > 0
      ) {
        return
      }

      const {
        account
      } = this

      if (!account) {
        Toast('请输入帐号')

        return
      }

      this.getValidLoading = true

      setTimeout(() => {
        this.getValidLoading = false
        isGetValid = true
        this.getValidIndex = getValidLimit

        this.getValidTimer = setInterval(() => {
          this.getValidIndex -= 1  

          if (this.getValidIndex <= 0) {
            clearInterval(this.getValidTimer)
            this.getValidTimer = null

            return
          }
        }, 1000)
      }, 2000)
    },
    // 提交表单 
    handleSubmit: function (e) {
      e.preventDefault()

      const {
        loading,

        account,
        valid,
        password,
      } = this

      if (loading) {
        return
      }

      const error = []

      if (!account) {
        error.push('请输入用户名')
      }

      if (error.length) {
        Toast(error[0])

        return
      }

      this.loading = true

      setTimeout(() => {
        this.loading = false

        Toast.success('重置密码成功')

        // 重置表单
        Object.assign(this.$data, this.$options.data())
      }, 2000)
    }
  },

  components: {
    Layout,
    Header,
    Content,
    Icon,
    Row,
    Col,
    Button,
  }
}

</script>

<style lang="less" scoped>

@import '../../less/mixin.less';

.form {
  padding: 17px 18px;
}

.form-group {
  margin-bottom: 11px;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-control-wrap {
  display: flex;
  padding: 12px 18px 11px;
  background: #fff;
  vertical-align: middle;
  border-radius: 3px;
}

.form-control {
  flex-grow: 1;
  flex-shrink: 0;
  display: block;
  border: none;
  background: transparent;
  font-size: 13px;
  line-height: 1.35;
  background: transparent;

  .resetPlaceholder(#A2A2A2);
}

.valid-btn {
  background-color: #FBAC07;
  border-color: #FBAC07;
  font-size: 13px;
  display: block;
  width: 100%;

  &[disabled] {
    background-color: #eee !important;
    border-color: #ddd !important;
  }
}

.submit {
  display: block;
  width: 100%;;
  margin-top: 47px;
  background: #3D8AC4;
  border-color: #3D8AC4;
  font-size: 16px;
}

</style>